<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动详情 - AI 智享生活管家</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="../css/custom.css" rel="stylesheet">
</head>
<body class="bg-white">
    <!-- 状态栏 -->
    <div class="status-bar">
        <img src="../images/status-bar.png" alt="状态栏" class="w-full h-full object-cover">
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
        <!-- 顶部导航 -->
        <nav class="px-4 py-2 flex items-center border-b">
            <a href="home.html" class="text-gray-600">
                <i class="fas fa-chevron-left text-xl"></i>
            </a>
            <h1 class="flex-1 text-center font-semibold">活动详情</h1>
            <div class="flex items-center space-x-4">
                <button class="text-gray-600">
                    <i class="far fa-heart text-xl"></i>
                </button>
                <button class="text-gray-600">
                    <i class="fas fa-share-alt text-xl"></i>
                </button>
            </div>
        </nav>

        <!-- 活动封面 -->
        <div class="relative">
            <img src="https://images.unsplash.com/photo-1540575467063-178a50c2df87" 
                 alt="活动封面" 
                 class="w-full h-64 object-cover">
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4">
                <h2 class="text-white text-xl font-semibold">2024科技创新展览会</h2>
                <p class="text-white/90 mt-1">4月15日 - 4月17日</p>
            </div>
        </div>

        <!-- 活动信息 -->
        <div class="p-4 space-y-4">
            <!-- 基本信息 -->
            <div class="space-y-2">
                <div class="flex items-center text-gray-600">
                    <i class="fas fa-map-marker-alt w-6"></i>
                    <span class="ml-2">北京国际会展中心</span>
                </div>
                <div class="flex items-center text-gray-600">
                    <i class="fas fa-clock w-6"></i>
                    <span class="ml-2">09:00 - 18:00</span>
                </div>
                <div class="flex items-center text-gray-600">
                    <i class="fas fa-ticket-alt w-6"></i>
                    <span class="ml-2">免费入场</span>
                </div>
            </div>

            <!-- 活动详情 -->
            <div>
                <h3 class="font-semibold text-lg mb-2">活动介绍</h3>
                <p class="text-gray-600 leading-relaxed">
                    2024科技创新展览会将汇集全球顶尖科技企业和创新项目，展示最新的人工智能、机器人、元宇宙等前沿科技成果。展会期间还将举办多场专业论坛和技术交流会，邀请行业专家分享最新技术趋势和发展方向。
                </p>
            </div>

            <!-- 参展企业 -->
            <div>
                <h3 class="font-semibold text-lg mb-2">参展企业</h3>
                <div class="grid grid-cols-4 gap-4">
                    <img src="https://via.placeholder.com/80" alt="企业Logo" class="rounded-lg">
                    <img src="https://via.placeholder.com/80" alt="企业Logo" class="rounded-lg">
                    <img src="https://via.placeholder.com/80" alt="企业Logo" class="rounded-lg">
                    <img src="https://via.placeholder.com/80" alt="企业Logo" class="rounded-lg">
                </div>
            </div>
        </div>
    </div>

    <!-- 底部报名按钮 -->
    <div class="fixed bottom-0 left-0 right-0 p-4 bg-white border-t">
        <button class="w-full bg-blue-500 text-white py-3 rounded-full font-medium">
            立即报名
        </button>
    </div>
</body>
</html> 
